<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table {
            border-collapse: collapse;
        }

        .grade {
            display: inline-block;
            width: 25px;
            height: 25px;
            line-height: 25px;
            border-radius: 4px;
            text-align: center;
        }

        .grade-A {
            background: #d4edda;
            color: #155724;
        }

        .grade-B {
            background: #d1ecf1;
            color: #0c5460;
        }

        .grade-C {
            background: #fff3cd;
            color: #856404;
        }

        .grade-D {
            background: #f8d7da;
            color: #721c24;
        }

        .grade-F {
            background: #f5f5f5;
            color: #6c757d;
        }

        .classes-filter>button,
        .grade-filter>button {
            padding: 0 10px;
            height: 36px;
            border: 1px solid #007bff;
            background-color: #fff;
            border-radius: 6px;
            color: #007bff;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .classes-filter>.active,
        .grade-filter>.active {
            background-color: #007bff;
            color: #fff;
        }
    </style>
</head>

<body>
    <!-- 班级筛选 -->
    <div class="classes-filter" id="classesFilter">

    </div>
    <!-- 学生等级筛选 -->
    <div class="grade-filter" id="gradeFilter">

    </div>

    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>班级</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>平均分</th>
                <th>等级</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody id="studentList"></tbody>
    </table>

    <script>
        const studentsData = [
            { id: '2024001', name: '张三', class: '高一(1)班', chinese: 85, math: 92, english: 78 },
            { id: '2024002', name: '李四', class: '高一(1)班', chinese: 92, math: 88, english: 95 },
            { id: '2024003', name: '王五', class: '高一(2)班', chinese: 76, math: 82, english: 79 },
            { id: '2024004', name: '赵六', class: '高一(2)班', chinese: 65, math: 58, english: 62 },
            { id: '2024005', name: '钱七', class: '高一(3)班', chinese: 88, math: 94, english: 91 },
            { id: '2024006', name: '孙八', class: '高一(3)班', chinese: 72, math: 68, english: 75 },
            { id: '2024007', name: '周九', class: '高一(1)班', chinese: 95, math: 89, english: 93 },
            { id: '2024008', name: '吴十', class: '高一(2)班', chinese: 58, math: 62, english: 55 },
            { id: '2024009', name: '郑十一', class: '高一(3)班', chinese: 81, math: 76, english: 84 },
            { id: '2024010', name: '王十二', class: '高一(1)班', chinese: 69, math: 71, english: 66 }
        ];

        const classesData = [
            { id: '000', name: '全部班级' },
            { id: '001', name: '高一(1)班' },
            { id: '002', name: '高一(2)班' },
            { id: '003', name: '高一(3)班' },
        ]

        const gradeData = [
            { id: '0', name: '全部学生', },
            { id: '1', name: '及格学生', },
            { id: '2', name: '不及格学生', },
            { id: '3', name: '优秀学生（90+）', },
            { id: '4', name: '需提高（60-70）', },
        ]


        const studentListEle = document.getElementById('studentList')
        const classesFilterEle = document.getElementById('classesFilter')
        const gradeFilterEle = document.getElementById('gradeFilter')

        // 当前选中的班级id
        let classId = '000';
        // 当前选中的学生等级分类对象
        let gradeItem = gradeData[0];


        studentsRender();
        classesButtonRender();
        gradeButtonRender();

        // 事件委托：每一个班级按钮的点击事件（切换班级）
        classesFilterEle.addEventListener('click', function (e) {
            if (e.target.nodeName == 'BUTTON') {
                // 获取到当前选中的班级id，保存到全局classId
                classId = e.target.dataset.id;
                // 重新渲染班级按钮样式
                classesButtonRender();
                // 重新渲染学生列表
                studentsRender();
            }
        })

        // 事件委托：每一个等级分类按钮的点击事件
        gradeFilterEle.addEventListener('click', function (e) {
            if (e.target.nodeName == 'BUTTON') {
                const gradeId = e.target.dataset.id;
                gradeItem = gradeData.find(item => item.id == gradeId);
                gradeButtonRender();
                // 重新渲染学生列表
                studentsRender();
            }
        })


        // 根据条件筛选学生数据，并将筛选好的数据返回出来
        function filterByClass() {
            // 根据当前班级id，找到班级对象（才能获取到班级名称）
            const classItem = classesData.find(item => item.id == classId);

            // 先获取到所有经过等级筛选的数据
            const gradeFilterData = filterByGrade();

            if (classItem.id == '000') {
                // 进入if，表示当前选中的按钮【全部班级】，直接返回所有学生
                return gradeFilterData;
            }
            // 根据班级名称，筛选学生（用每一个学生的class和当前选中班级的name进行比较）
            return gradeFilterData.filter(item => item.class == classItem.name);
        }

        function filterByGrade() {
            switch (gradeItem.id) {
                case '0':
                    return studentsData;
                case '1':
                    return studentsData.filter(item => getAverage(item) >= 60)
                case '2':
                    return studentsData.filter(item => getAverage(item) < 60)
                case '3':
                    return studentsData.filter(item => {
                        return getAverage(item) >= 90
                    })
                case '4':
                    return studentsData.filter(item => {
                        return getAverage(item) >= 60 && getAverage(item) <= 70
                    })
            }
        }




        // 动态渲染班级按钮
        function classesButtonRender() {
            classesFilterEle.innerHTML = classesData.map(item => {
                if (item.id == classId) {
                    return `<button class="active" data-id="${item.id}">${item.name}</button>`
                }
                return `<button data-id="${item.id}">${item.name}</button>`
            }).join('')
        }
        // 动态渲染学生等级按钮
        function gradeButtonRender() {
            gradeFilterEle.innerHTML = gradeData.map(item => {
                if (item.id == gradeItem.id) {
                    return `<button class="active" data-id="${item.id}">${item.name}</button>`
                }
                return `<button data-id="${item.id}">${item.name}</button>`
            }).join('')
        }

        function studentsRender() {
            // 调用筛选学生的方法，并保存筛选后的学生数
            const filterData = filterByClass();
            // const filterData = filterByGrade();

            studentListEle.innerHTML = filterData.map(item => {
                // 计算每一个学生的平均分
                const averageScore = getAverage(item);
                // 调用函数，传递平均分到函数内部，接收函数内部返回的等级数据
                const gradeInfo = getGrade(averageScore); // { grade: 'A', color: 'green' }
                const status = getStatus(averageScore);
                const bgColor = getTrBgColor(averageScore);

                return (
                    `
                    <tr style="background: ${bgColor}">
                        <td>${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.class}</td>
                        <td>${item.chinese}</td>
                        <td>${item.math}</td>
                        <td>${item.english}</td>
                        <td>${averageScore.toFixed(1)}</td>
                        <td>
                            <strong class="grade ${gradeInfo.class}">${gradeInfo.grade}</strong>    
                        </td>
                        <td>${status}</td>
                    </tr>
                    `
                )

            }).join('')
        }

        function getTrBgColor(averageScore) {
            if (averageScore >= 90) {
                return 'linear-gradient(90deg, #fff, #e8f5e8)'
            } else if (averageScore < 60) {
                return 'linear-gradient(90deg, #fff, #f8d7da)'
            }
            return 'transparent'
        }


        function getAverage(studentItem) {
            return (studentItem.chinese + studentItem.math + studentItem.english) / 3
        }

        function getStatus(averageScore) {
            if (averageScore >= 60) {
                return '及格'
            }
            return '不及格'
        }


        function getGrade(averageScore) {
            // 计算每一个学生的等级
            if (averageScore >= 90) {
                return {
                    grade: 'A',
                    class: 'grade-A'
                }
            }
            if (averageScore >= 80) {
                return {
                    grade: 'B',
                    class: 'grade-B'
                }
            }
            if (averageScore >= 70) {
                return {
                    grade: 'C',
                    class: 'grade-C'
                }
            }
            if (averageScore >= 60) {
                return {
                    grade: 'D',
                    class: 'grade-D'
                }
            }
            return {
                grade: 'F',
                class: 'grade-F'
            }
        }
    </script>
</body>

</html>